<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<title>Campus Smart Food</title>
	<meta http-equiv="Content-Type" content="text/html" charset=utf-8" />
	<meta name="title" content="Web site" />
	<meta name="description" content="Campus Smart Food Inc" />
	<link id="theme" rel="stylesheet" type="text/css" href="css/style.css" title="theme" />

	<script>
		var dojoConfig = {
			dojoBlankHtmlUrl: location.pathname.replace(/\/[^/]+$/, '') + '/blank.html',
			packages: [{
				name: 'custom',
				location: location.pathname.replace(/\/[^/]+$/, '') + '/js/custom'
			}]
		};
	</script>
	<!-- Dojo Library Reference -- Using Google Content Delivery Network (CDN) -->
	
	<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"></script>
		
	<!-- Dojo Library Reference -- Local Reference -->
	<!--
	<script src="dojo-release-1.8.1/dojo/dojo.js"
		data-dojo-config="async: true"></script>
	-->
	
	<!-- Dojo script for Pie Chart -->
	<script>		
					
	require([
		 // Require the basic chart class
		"dojox/charting/Chart",

		// Require the theme of our choosing
		"dojox/charting/themes/Claro",
		
		// Charting plugins: 

		// 	We want to plot a Pie chart
		"dojox/charting/plot2d/Pie",

		// Retrieve the Legend, Tooltip, and MoveSlice classes
		"dojox/charting/action2d/Tooltip",
		"dojox/charting/action2d/MoveSlice",
		
		//	We want to use Markers
		"dojox/charting/plot2d/Markers",

		//	We'll use default x/y axes
		"dojox/charting/axis2d/Default",

		// Wait until the DOM is ready
		"dojo/domReady!"
	], function(Chart, theme, Pie, Tooltip, MoveSlice) {

		// Define the data 
		// JH: We should define a variable call pieChartData[]
		//var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
		var chartData = [10000,9200,811,2099];
		
		// Create the chart within it's "holding" node
		// "pieChartNode" is the holding node div created
		var chart = new Chart("pieChartNode");

		// Set the theme
		chart.setTheme(theme);

		// Add the only/default plot 
		chart.addPlot("default", {
			type: Pie,
			markers: true,
			radius:170
		});
		
		// Add axes
		chart.addAxis("x");
		chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" });

		// Add the series of data
		chart.addSeries("Monthly Sales - 2010",chartData);
		
		// Create the tooltip
		var tip = new Tooltip(chart,"default");
		
		// Create the slice mover
		var mag = new MoveSlice(chart,"default");
		
		// Render the chart!
		chart.render();

	});
	</script>		

	<!-- Dojo script for Bar Chart -->
	<script>
		
	require([
		 // Require the basic chart class
		"dojox/charting/Chart",

		// Require the theme of our choosing
		"dojox/charting/themes/MiamiNice",
		
		// Charting plugins: 

		// 	We want to plot Columns
		"dojox/charting/plot2d/Columns",

		// Require the highlighter
		"dojox/charting/action2d/Highlight",

		//	We want to use Markers
		"dojox/charting/plot2d/Markers",

		//	We'll use default x/y axes
		"dojox/charting/axis2d/Default",

		// Wait until the DOM is ready
		"dojo/domReady!"
	], function(Chart, theme, ColumnsPlot, Highlight) {

		// Define the data
		// JH: We should define a variable call barChartData[]
		var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
		
		// Create the chart within it's "holding" node
		// "barChartNode" is the holding node div created
		var chart = new Chart("barChartNode");

		// Set the theme
		chart.setTheme(theme);

		// Add the only/default plot 
		chart.addPlot("default", {
			type: ColumnsPlot,
			markers: true,
			gap: 5
		});
		
		// Add axes
		chart.addAxis("x");
		chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });

		// Add the series of data
		chart.addSeries("Monthly Sales",chartData);
		
		// Highlight!
		new Highlight(chart,"default");

		// Render the chart!
		chart.render();
		
	});
	
	</script>			
	
</head>

<body>
<!-- top wrapper -->
<div id="topWrapper">
<div id="topBanner">
<div id="topLogin">
<font face="verdana,arial" size=-1>
<center><table cellpadding='2' cellspacing='0' border='0' id='ap_table'>
<tr><td bgcolor="red"><table width='100%'><tr><td bgcolor="#880000" align=center <b><font size=-1 color="white" face="verdana,arial"><b>Enter your login and password</b></font></th></tr>
<tr><td bgcolor="white" style="padding:5"><br>
<form method="post" action="" name="aform" target="_top">
<center><table>
<tr><td><font face="verdana,arial" size=-1>Access Card #:</td><td><input type="text" name="card_number"></td></tr>
<tr><td><font face="verdana,arial" size=-1>PIN:</td><td><input type="password" name="pin_code"></td></tr>
<tr><td><font face="verdana,arial" size=-1>&nbsp;</td><td><font face="verdana,arial" size=-1><input type="submit" value="Enter"></td></tr>
<tr><td colspan=2><font face="verdana,arial" size=-1>&nbsp;</td></tr>
</table></center>
</form>
</td></tr></table></td></tr></table>
</div>
</div>
<div id="topnav">
<ul>
<li id="current" style="border: medium none ;"> <a href="#" shape="rect">Home</a> </li>
<li> <a href="#" shape="rect">My Profile</a>
</li>
<li> <a href="#" shape="rect">Visualization</a>
</li>
</ul>
</div>
<!-- end top wrapper -->
<div id="wrapper">
<div id="bg">
<div class="clear vmenu" id="header"></div>
<div id="page"><!-- begin container -->
<div id="container"><!-- content -->
<div id="content"><!-- place content here -->
	<h1 class="title_text">Dojo Chart Demo: Pie Chart- Monthly Sales with Highlights</h1>
	<div class="charts" id="pieChartNode"></div>		

	<br><br>

	<h1 class="title_text">Dojo Chart Demo: Bar Chart - Monthly Sales with Highlights</h1>		
	<div class="charts" id="barChartNode"></div>			

</div>

<div id="center"><!-- place center here if needed -->
</div>

<div class="clear" style="height: 40px;"></div>
</div>
<!-- end content --> </div>
<!-- end container --> </div>
<div id="footerWrapper">
<div id="footer">
<p style="padding-top: 10px;"> </p>
</div>
</div>
</div>
</div>
</body></html>